<template>
  <el-form
    ref="loginForm"
    size="large"
    autocomplete="off"
    :model="fromData"
    :rules="rules"
  >
    <el-form-item>
      <el-radio-group v-model="role" size="large">
        <el-radio-button value="employee">我是求职者</el-radio-button>
        <el-radio-button value="employer">我是招聘方</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-radio-group v-model="loginMethod" @change="handleLoginMethodChange">
        <el-radio :value="1">密码登录</el-radio>
        <el-radio :value="2">验证码登录</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-input
        :prefix-icon="User"
        v-model="fromData.cellPhone"
        placeholder="请输入手机号"
      ></el-input>
    </el-form-item>
    <el-form-item v-if="loginMethod === 1">
      <el-input
        :prefix-icon="Lock"
        type="password"
        v-model="fromData.password"
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>
    <el-form-item v-else>
      <div class="verification-code-group">
        <el-input :prefix-icon="Lock" placeholder="请输入验证码"></el-input>
        <el-button
          type="primary"
          class="verification-code-btn"
          @click="sendVerificationCode"
        >
          获取验证码
        </el-button>
      </div>
    </el-form-item>
    <el-form-item>
      <div class="agreement">
        <label>
          <input type="checkbox" v-model="agreedToTerms" />
          <span>同意《登录协议》和《隐私政策》</span>
        </label>
        <a href="#">忘记密码</a>
      </div>
      <el-button
        class="button"
        type="primary"
        auto-insert-space
        @click="submitForm(loginForm)"
      >
        <!-- @click="submitForm(loginForm)" -->
        登录
      </el-button>
    </el-form-item>
    <el-form-item class="flex">
      <el-link type="info" :underline="false" @click="$emit('toggle-register')">
        注册 →
      </el-link>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import router from '@/router'
import { getUserInfo, userLogins } from '@/api/user'
import { useUserStore } from '@/stores/modules/user'
const store = useUserStore()

const role = ref('employee') // 默认为求职者
const loginMethod = ref(1) // 默认为密码登录
const agreedToTerms = ref(true)
// 登录数据初始化
const loginForm = ref()
const fromData = reactive({
  cellPhone: '13500010003',
  password: '123456',
  role
})

// 效验规则
const rules = reactive({
  cellPhone: [
    { required: true, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [{ required: true, message: '请输入正确的密码', trigger: 'blur' }]
})

const handleLoginMethodChange = () => {
  // 处理登录方式改变的逻辑
}
const sendVerificationCode = () => {
  // 发送验证码的逻辑
  console.log('发送验证码')
}

// 数据提交
const submitForm = (formEl) => {
  if (!formEl) return
  if (!agreedToTerms.value) {
    ElMessageBox.alert('同意《登录协议》和《隐私政策》', {
      confirmButtonText: '确定',
      type: 'warning'
    })
  } else {
    formEl.validate(async (valid) => {
      if (valid) {
        await userLogins(fromData).then(async (res) => {
          console.log(res)
          if (res.code === 200) {
            // 用户token写入 pinia
            store.setToken(res.data)
            // 获取用户信息
            const data = await getUserInfo()

            if (res.code === 200) {
              // 记录到store 并调转到首页
              console.log(data)
              store.setUserInfo(data.data)
              router.push('/main/index')
            }
            // 跳转到首页
          } else {
            ElMessage({
              message: res.msg,
              type: 'error'
            })
            console.log('登录失败')
          }
        })
      } else {
        console.log('error submit!')
        return false
      }
    })
  }
}
// const login = () => {
//   instance.post('/users/login/phone', fromData, {
//     withCredentials: true
//   })

//   // router.push('/main')
//   console.log('执行登录操作')
// }
</script>

<style scoped lang="scss">
/* LoginPasswordForm 样式 */
.agreement {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.agreement a {
  margin-left: 1rem;
  color: #3b82f6;
}
.button {
  width: 100%;
}
.flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.verification-code-group {
  display: flex;
  align-items: center;
  .verification-code-btn {
    margin-left: 15px;
  }
}
</style>
